@use "sass:math";
@use "../../assets/scss/mixins/base" as mx;

$ag: 50;
$ab: 33;
$cx: 7;
$yv: 28;
$vz: 14;
$angle: calc(360 / 16 * 1deg);
$ac: math.cos($angle) * $ab;
$ad: calc($ac / math.cos(45deg));
$cd: $ad - $ac;
$dg: 50 - $ad;
$dgTilted: calc($dg * math.cos(calc($angle / 2)));
$dgOffset: $dg * math.sin(calc($angle / 2));
$bh: math.cos($angle) * $ad - $ab;
$be: 50 - $ab;
$hRatio: calc($be / $bh);
$ef: 2 * math.sin($angle) * $ag;
$eg: 2 * math.sin(calc($angle / 2)) * $ag;
$ai: math.cos(calc($angle / 2)) * $ag;
$af: math.cos($angle) * $ag;
$fg: $ag - $af;
$twinRatio: calc(
  $dgOffset / $eg * 100
); //the ratio between the whole height of twin triangles to the shorter bit (to calculate the clip-path)

$ed: math.sin($angle) * 50;

// the vertical calcs

$xy: $cx * ($hRatio - 1);

$hShorter: math.sqrt(
  math.pow($bh, 2) + math.pow($cx, 2)
); //height of the shorter triangle forming the rhombus
$hLonger: $hShorter * $hRatio; // height of the taller triangle forming the rhombus
$dhd: 2 * math.sin($angle) * $ad; // the width of the rhombus
$rhombAngle: math.atan(calc($bh / $cx)); // its angle of inclination

$twinH: math.sqrt(
  math.pow($dgTilted, 2) + math.pow($xy, 2)
); //the height of the twin triangles
$twinAngle: math.atan(calc($dgTilted / $xy)); //its angle of inclination

$hRhomBase: math.sqrt(
  math.pow($yv + $vz, 2) + math.pow($ag, 2)
); //the height of the rhomboid forming the base
$rBangle: math.atan(calc($ag / ($yv + $vz))); //its angle of inclination

$midEGtoYV: $ag * calc(1 - 1 / math.cos($angle) / 3) *
  math.cos(calc($angle / 2)); //distance from the center of eg to 2/3 of the total height of the crystal - which is there the tip of twinBase meets the side corner of rhomBase
$midOffset: $ag * calc(1 - 1 / math.cos($angle) / 3) *
  math.sin(calc($angle / 2));
$tipRatio: calc($midOffset / $eg * 100);
$hTwinBase: math.sqrt(
  math.pow($midEGtoYV, 2) + math.pow($yv, 2)
); //the height of the twin triangles forming the base
$tBangle: math.atan(calc($midEGtoYV / $yv)); //its angle of inclination

body {
  margin: 0;
  box-sizing: border-box;
  //   display: grid;
  height: 100vh;
  font-size: 0.5vw;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  overflow: clip;

  #play:checked ~ #scene,
  #play:checked ~ #scene div,
  #play:checked ~ #scene div::before {
    animation-play-state: running;
  }

  #bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(3deg, #000 5%, #0008 50%, #0000 90%),
      linear-gradient(45deg, #f40, #f08);
    transition: all 3s ease-out;
  }
  #scene {
    position: absolute;
    width: 100em;
    display: grid;
    place-self: center;
    place-items: center;
    aspect-ratio: 1;
    perspective: 250em;
    justify-items: center;
    animation: focal 10s ease-in-out alternate infinite paused;
    --hue: -50deg;
    filter: brightness(0.5) sepia() hue-rotate(var(--hue)) contrast(180%)
      saturate(4);
    transition: filter 1s ease-in;
    div {
      mix-blend-mode: difference;
      position: absolute;
      animation: spin 8s linear infinite paused;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        background: linear-gradient(var(--gradAngle), var(--clr1), var(--clr2));
        animation: hue 7s linear infinite paused;
      }
    }
    & * {
      transform-style: preserve-3d;
    }

    @media (orientation: portrait) {
      body {
        font-size: 0.4vh;
      }
      nav label {
        width: 20em;
        margin: 3em 3em 0 0;
      }

      #pauseBtn {
        width: 20em;
        height: 20em;
        margin: 3em;
      }
    }

    $square: 100;
    $diameter: calc($square / math.cos($angle));
    $octaEdge: math.sqrt(math.pow($diameter, 2) - math.pow($square, 2));
    $section: $octaEdge * math.cos(90deg - $angle);

    #octaTop {
      width: $ac * 2em;
      aspect-ratio: 1;
      top: 45 - ($cx * $hRatio + $ac) * 1em;
      overflow: hidden;
      --arrange: rotateX(90deg);
      --gradAngle: 0;
      --clr1: #fd4;
      --clr2: #077;
      &::before {
        transform: rotate(45deg);
      }
    }

    $bc: 2 * math.sin($angle) * $ab;
    $hTriangle1: math.sqrt(
      math.pow($cd, 2) + math.pow($cx, 2)
    ); //height of the .triangle1, which is anchored to the octagonal top's edges
    $tr1angle: math.atan(calc($cd / $cx));

    .triangle1 {
      width: $bc * 1em;
      height: $hTriangle1 * 1em;
      top: 45 - ($cx * $hRatio) * 1em;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      transform-origin: top;
      --arrange: rotateY(calc(var(--step) * 45deg)) translateZ(#{$ac}em)
        rotateX(#{$tr1angle});
      --gradAngle: 210deg;
      --clr1: hsl(calc(10deg + 45deg * var(--step)) 100% 50%);
      --clr2: hsl(calc(70deg + 45deg * var(--step)) 100% 50%);
      border-top: 1px solid #ff0;
    }
    .rhomb {
      width: $dhd * 1em;
      height: $hLonger * 1em;
      top: (45 - $cx * $hRatio) * 1em;
      --arrange: rotateY(calc(#{$angle} + var(--step) * 45deg)) translateZ(33em)
        rotateX(#{$rhombAngle});
      clip-path: polygon(
        50% 0,
        0 calc(100% / $hRatio),
        50% 100%,
        100% calc(100% / $hRatio)
      );
      --gradAngle: 240deg;
      --clr1: hsl(calc(180deg + 45deg * var(--step)) 100% 50%);
      --clr2: hsl(calc(240deg + 45deg * var(--step)) 100% 50%);
      &::before {
        background-color: #0f0;
      }
    }
    .twinGon {
      width: $eg * 1em;
      height: $twinH * 1em;
      transform-origin: 50% 100%;
      --arrange: rotateY(
          calc(45deg * (var(--step) + var(--halfStep)) + 11.25deg)
        )
        translateZ(#{$ai}em) rotateX(#{$twinAngle});
      justify-self: center;
      bottom: 55em;
      clip-path: polygon(
        0 100%,
        100% 100%,
        calc(50% - (50% - #{percent(calc($twinRatio / 100))}) * var(--dir)) 0
      );
      padding: 0.1em;
      --gradAngle: 280deg;
      --clr1: hsl(
        calc(90deg + 45deg * (var(--step) + var(--halfStep))) 100% 50%
      );
      --clr2: hsl(
        calc(150deg + 45deg * (var(--step) + var(--halfStep))) 100% 50%
      );
      border-bottom: 1px solid #ff0;
      &:before {
        background: #f80;
      }
    }
    .rhomBase {
      bottom: 55em - ($yv + $vz) * 1em;
      height: $hRhomBase * 1em;
      width: ($yv + $vz) * calc(1em / 3);
      clip-path: polygon(
        50% 0,
        100% calc(100% * 2 / 3),
        50% 100%,
        0 calc(100% * 2 / 3)
      );
      transform-origin: bottom;
      --arrange: rotateY(calc(#{$angle} + 45deg * var(--step)))
        rotateX(-#{$rBangle});
      --gradAngle: -30deg;
      --clr1: hsl(calc(70deg + 45deg * var(--step)) 100% 50%);
      --clr2: hsl(calc(200deg + 45deg * var(--step)) 100% 50%);
      &:before {
        background: hsl(calc(45deg * var(--step)) 100% 50%);
      }
    }
    .twinBase {
      width: $eg * 1em;
      height: $hTwinBase * 1em;
      top: 45em;
      background: cyan;
      transform-origin: top;
      --arrange: rotateY(
          calc(45deg * (var(--step) + var(--halfStep)) + 11.25deg)
        )
        translateZ(#{$ai}em) rotateX(-#{$tBangle});
      clip-path: polygon(
        0 0,
        100% 0,
        calc(50% - (50% - #{percent(calc($tipRatio / 100))}) * var(--dir)) 100%
      );
      --gradAngle: 60deg;
      --clr1: hsl(
        calc(270deg + 45deg * (var(--step) + var(--halfStep))) 100% 40%
      );
      --clr2: hsl(
        calc(400deg + 45deg * (var(--step) + var(--halfStep))) 100% 40%
      );
    }

    @for $i from 1 through 8 {
      div:nth-child(8n + #{$i}) {
        --step: #{$i};
      }
    }
    .left {
      --dir: -1;
      --halfStep: 0.5;
    }
    .right {
      --dir: 1;
      --halfStep: 0;
    }
  }

  #playBtn {
    display: flex;
    width: 40em;
    place-self: center;
    aspect-ratio: 1;
    position: absolute;
    background-image: conic-gradient(from 180deg, #fff4, #fffb),
      repeating-conic-gradient(#fff4, #fffb 5%);
    background-size: 60em 40em;
    background-position-x: 10em;
    clip-path: polygon(0 25%, 25% 0, 100% 50%, 25% 100%, 0 75%);
    box-shadow: inset 10em 0 0 0 #8880;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      background-color: #fff;
      box-shadow: inset 10em 0 0 0 #888;
    }
  }
  nav {
    position: absolute;
    display: flex;
    border: none;
    pointer-events: none;
    width: 100%;
    label {
      pointer-events: all;
      margin: 2em 2em 0 0;
      width: 12em;
      aspect-ratio: 1;
      position: relative;
      overflow: hidden;
      transition: filter 0.5s ease-in-out;
      filter: saturate(1) drop-shadow(0 0 0 var(--auraColor))
        drop-shadow(0 0 0 var(--auraColor));
      &::after {
        content: "";
        position: absolute;
        inset: 14.64%;
        transform: rotate(22.5deg);
      }
      &:not(#pauseBtn)::before {
        inset: 0;
        background-color: var(--gemColor);
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
      }
      div {
        position: absolute;
        inset: 0;
        transform: rotate(45deg);
        overflow: hidden;
        // @include mx.pseudo-ba() {
        //   background: var(--gemColor);
        //   mix-blend-mode: difference;
        // }
        &::before {
          inset: 0 30%;
        }
        &::after {
          inset: 30% 0;
        }
      }
      &::after,
      & div,
      & div::before,
      & div::after {
        mix-blend-mode: difference;
      }
      &::after,
      & div::before,
      & div::after {
        background-color: var(--gemColor);
      }
      &::before,
      &::after,
      & div::before,
      & div::after {
        content: "";
        position: absolute;
      }
    }
    #pauseBtn {
      position: absolute;
      margin-left: 2em;
      cursor: pointer;
      &::before {
        content: "";
        position: absolute;
        inset: 3em 0;
        background: linear-gradient(90deg, #fff9, #fff 50%, #fff0 50%);
        background-size: calc(100% * 2 / 3);
        background-color: #fff3;
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-color: #fff;
        opacity: 0.75;
        transition: all 0.3s ease-in-out;
      }
      &:hover::before {
        opacity: 1;
        border-color: #fff0;
        background-color: #fff0;
        transform: scaleX(0.75);
      }
    }
    #red {
      --gemColor: #800;
      --glowColor: #f00;
      --auraColor: #f88;
      margin-left: auto;
      cursor: pointer;
    }
    #green {
      --gemColor: #080;
      --glowColor: #0f0;
      --auraColor: #0f0;
      cursor: pointer;
    }
    #blue {
      --gemColor: #008;
      --glowColor: #00f;
      --auraColor: #0ff;
      cursor: pointer;
    }
  }

  #ruby:checked ~ #bg {
    filter: hue-rotate(0deg);
  }
  #ruby:checked ~ #scene {
    --hue: -50deg;
  }
  #emerald:checked ~ #bg {
    filter: hue-rotate(120deg);
  }
  #emerald:checked ~ #scene {
    --hue: 70deg;
  }
  #sapphire:checked ~ #bg {
    filter: hue-rotate(240deg);
  }
  #sapphire:checked ~ #scene {
    --hue: 190deg;
  }

  #ruby:checked ~ nav #red,
  #emerald:checked ~ nav #green,
  #sapphire:checked ~ nav #blue {
    filter: saturate(2) drop-shadow(0 0 0 var(--glowColor))
      drop-shadow(0 0 0 var(--glowColor));
  }

  #ruby:checked ~ nav #red::before,
  #emerald:checked ~ nav #green::before,
  #sapphire:checked ~ nav #blue::before {
    background: radial-gradient(var(--glowColor), #000);
  }

  #ruby:not(:checked):hover ~ nav #red,
  #emerald:not(:checked):hover ~ nav #green,
  #sapphire:not(:checked):hover ~ nav #blue {
    filter: saturate(1) drop-shadow(0 0 1em var(--glowColor))
      drop-shadow(0 0 2em var(--glowColor));
  }

  input,
  #play:checked ~ #playBtn,
  #pause:checked ~ nav #pauseBtn {
    display: none;
  }
  #pause:checked ~ #playBtn,
  #paly:checked ~ nav #pauseBtn {
    display: grid;
  }
}

@keyframes hue {
  from {
    filter: hue-rotate(0);
  }
  to {
    filter: hue-rotate(-360deg);
  }
}
@keyframes spin {
  from {
    transform: rotateY(0) var(--arrange);
  }
  to {
    transform: rotateY(1turn) var(--arrange);
  }
}
@keyframes focal {
  from {
    perspective-origin: 25% -25%;
  }
  to {
    perspective-origin: 25% 125%;
  }
}
